<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				outline: none;
			}

			#box {
				width: 400px;
				margin: 20px auto;
				
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li v-for="(item,index) in chazhao()" :key='item.xuehao'>{{item.name}}<button type="button" @click='sdelete(item.xuehao)'>移除</button></li>
				<!-- <li>李四</li>
			<li>王五</li>
			<li>赵六</li> -->
			</ul>
			输入姓名筛选记录：<input type="text" v-model='chakan'>
		</div>
		<script>
			Vue.config.productionTip = false
		let vm=new Vue({
				el: "#box",
				data: {
					shuju: [{
							name: "陈玉林",
							xuehao: "21805200101",
							banji: "18高计应",
						},
						{
							name: "邓婷",
							xuehao: "21805200102",
							banji: "18高计应",
						},
						{
							name: "邓组方",
							xuehao: "21805200103",
							banji: "18高计应",
						},
						{
							name: "樊家俊",
							xuehao: "21805200104",
							banji: "18高计应",
						},
						{
							name: "甘思思",
							xuehao: "21805200105",
							banji: "18高计应",
						},
						{
							name: "郭锟",
							xuehao: "21805200106",
							banji: "18高计应",
						},
						{
							name: "何柳炀",
							xuehao: "21805200107",
							banji: "18高计应",
						},
						{
							name: "林鑫",
							xuehao: "21805200108",
							banji: "18高计应",
						},
						{
							name: "刘雯云",
							xuehao: "21805200109",
							banji: "18高计应",
						},
						{
							name: "卢双禧",
							xuehao: "21805200110",
							banji: "18高计应",
						}
					],
					shuju1: [],
					chakan: ''
				},
				// created() {
				// 	if (this.chakan == '') {
				// 		this.shuju1 = this.shuju
				// 	}
				// },
				methods: {
					sdelete(num) {
						let index=this.shuju.findIndex((e)=>{
							return e.xuehao==num
						})
						this.shuju.splice(index,1)
					},
					chazhao(){
					return this.shuju.filter((i)=>{
							return i.name.indexOf(this.chakan)!=-1
						})
					}
				},
				// computed: {
				// 	chazhao(){
				// 	return this.shuju.filter((i)=>{
				// 			return i.name.indexOf(this.chakan)!=-1
				// 		})
				// 	}
				// },
			})
		</script>
	</body>
</html>
